<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //key的原理 对它的理解
    /**
     * key的作用主要是为了高效的更新虚拟DOM;
     * key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
     * 当页面的数据发生变化时，Diff算法只会比较同一层级的节点：
     * 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点;
       如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新;
    */
   //vue生命周期
   /**
    * vue的生命周期就是组件被创建 挂在 改变 销毁 时触发的钩子函数
    * vue的生命周期有 ：beforeCreate创建前 created创建后 beforemount挂在前 mounted挂在后
    * beforeupdate更新前 updated更新后 beforeDestroy 销毁前 destroyed销毁后 activated  keep-active缓存组件被激活时调用
    * deactivated keep-active 缓存组件停用时调用
    * 具体分析就是  
    * beforeCreate 初始化vue实例进行数据观测  
    * created 完成数据观测可以在里面调用watch computed 和methods方法
    *  beforemount  vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了
    *  mounted  vm.el完成挂载 vm.$el生成dom替换了el选项中对应的dom
    * beforeUpdate  当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步
    * updated   当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
    * beforeDestory  组件销毁之前调用 ，在这一步，实例仍然完全可用。
    * destoryed  组件销毁之后调用，对 data 的改变不会再触发周期函数, dom 结构依然存在
    * 
   */
   //mixin的理解 应用场景
   /**
    * mixin（混入），提供了一种非常灵活的方式，来分发vue组件中的可复用功能。
    * 其本质就是一个js对象，可以包含我们组件想要复用的任意功能和生命周期，如：data、created、methods、computed等等
    * 局部混入
    * let myMixin = {
            created: function() {
                this.hello()
            },
            methods: {
                hello: function() {
                    console.log('hello myMixin')
                }
            }
        }
        import myMixin from '@/mixin'
        mixins: [myMixin],
        全局混入
        let myMixin = {
                ...
            }

            new Vue({
                i18n,
                router,
                mixins: [myMixin],
                render: h => h(App)
        }).$mount('#app')
   */
</script>